<template>
  <div class="vy-cmp-work-item vy-cmp-work-qanda">
    <!-- 作业内容 - 问答题 - 复用组件 -->
    <a-row>
      <a-col :span="6">
        <span class="vy-title">{{ title }}</span>
      </a-col>
      <a-col :span="16">&nbsp;</a-col>
      <a-col :span="2" style="text-align:right;">
        <a-button type="link" style="padding:0;" @click="click_del_work"
          >删除</a-button
        >
      </a-col>
    </a-row>
    <a-row>
      <!-- <a-col :span="3" class="vy-label">标题</a-col> -->
      <a-col :span="24">
        <a-input
          placeholder="请输入问题内容，最多输入1000字"
          v-model="source.title"
        ></a-input>
      </a-col>
    </a-row>
    <a-row v-for="(option, index) in source.options" :key="index">
      <a-col :span="3" class="vy-label">{{ option.name }}</a-col>
      <a-col :span="21">
        <a-textarea
          placeholder="点此输入问答内容"
          v-model="option.answer"
          :rows="4"
          style="resize: none;"
        />
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "vy-cmp-work-qanda",
  props: ["title", "index", "source"],
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      // this.add_default_option(); // 添加默认的选项
    });
  },
  methods: {
    // 添加默认的选项
    add_default_option() {
      // 没有选项列表时，追加默认选项
      if (this.source.options && !this.source.options.length) {
        this.source.options.push({
          id: +new Date(),
          name: "内容",
          answer: "",
        });
      }
    },
    // 删除当前作业
    click_del_work() {
      this.$emit("del_work", this.index);
    },
  },
};
</script>
<style lang="scss">
.vy-cmp-work-qanda {
  padding: 10px;
  .vy-title {
    background: rgba(238, 244, 255, 1);
    padding: 10px;
    border-radius: 4px;
    font-weight: 400;
    color: rgba(127, 159, 255, 1);
  }
  .vy-label {
    text-align: right;
    padding-right: 20px;
  }
  .ant-row {
    padding: 5px 10px;
    .ant-btn-link {
      color: #444040;
    }
  }
}
</style>
